<template>
    <div class="containter">
        <div>
            <el-card>
                <filterComponent v-model:filter-data="filterData" @doSearch="handleSearch" />
            </el-card>
        </div>
        <el-card class="mg-t-20">
            <tableComponent class="set-height" :table-header="tableHeader" :table-data="tableData"
                v-model:page-info="pageInfo" @pageChange="handlePageChange">
                <template #valid>
                    <el-table-column label="可用工种" prop="occupationList">
                        <template #default="scope">
                            <div v-for="(i, index) in scope.row.occupationList" :key="index">
                                {{ i.name }}（{{ i.level }}类）；
                            </div>
                        </template>
                    </el-table-column>
                </template>
                <template #settings>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="handleShowAdd(scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" @click="handleRemove(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </template>
            </tableComponent>
        </el-card>
    </div>
    <addIndustry v-model:show="showAdd" :type="addType" v-model:cur-item="curItem" @success="getList" />
</template>
<script setup>
import { ref, onMounted, onActivated } from 'vue'
import { ElMessage } from 'element-plus'
import { industryList, removeIndustry } from 'api/insure/longTerm.ts'
import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import addIndustry from './components/dialog/addIndustry.vue'

const addType = ref('add')
const curItem = ref({})
const filterData = ref({
    list: {
        name: {
            name: '行业名称',
            prop: 'name',
            value: '',
            placeholder: '请输入行业名称',
            type: 'input',
            inputType: 'text'
        },
        searchOccupationName: {
            name: '工种名称',
            prop: 'searchOccupationName',
            value: '',
            placeholder: '请输入工种名称',
            type: 'input',
            inputType: 'text'
        },
        searchOccupationCode: {
            name: '工种编号',
            prop: 'searchOccupationCode',
            value: '',
            placeholder: '请输入工种编号',
            type: 'input',
            inputType: 'text'
        }
    },
    buttonList: [
        {
            icon: 'Plus',
            name: '新增行业',
            click: () => {
                addType.value = 'add'
                showAdd.value = true
                curItem.value = {}
            }
        }
    ]
})

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableHeader = ref([
    {
        label: '序号',
        prop: 'index',
        width: 100
    },
    {
        label: '行业名称',
        prop: 'name',
        width: 200
    },
    {
        label: '可用工种',
        prop: 'valid'
    },
])

const showAdd = ref(false)

const tableData = ref([])

const handleSearch = () => {
    getList()
}

const handlePageChange = () => {
    getList()
}

const createQuery = () => {
    const data = {}
    for (const key in filterData.value.list) {
        data[filterData.value.list[key].prop] = filterData.value.list[key].value
    }
    return data
}

const getList = () => {
    industryList({
        ...createQuery(),
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize
    }).then(res => {
        tableData.value = res.rows
        pageInfo.value.total = res.total
    })
}

const handleShowAdd = (item) => {
    addType.value = 'update'
    showAdd.value = true
    curItem.value = item
}

const handleRemove = (item) => {
    ElMessageBox.confirm(
        `是否确认删除行业名为"${item.name}"的数据项?`,
        '提示',
        {
            type: 'warning',
        }
    )
        .then(() => {
            removeIndustry({
                id: item.id
            }).then(res => {
                ElMessage.success({
                    message: '删除成功'
                })
                getList()
            })
        })
}

onMounted(() => {
    getList()
})
onActivated(() => {
    getList()
})
</script>
<style lang="scss" scoped>
.containter {
    padding: 16px;
}

// .set-height {
//     height: calc(100vh - 360px);
//     overflow: auto;
// }</style>